<template>
  <!-- 顶部导航栏 -->
  <navbar-bg text="个人中心" :isback="false">
    <!-- <view style="height: 200rpx;width: 300rpx;"></view> -->
    <template v-slot class="padding-lr-com">
      <view style="height: 340rpx;">
        <view class="profile-picture">
          <view class="picture-name">
            <image src="https://api.anred.qrsk.net/applet/profile/image/shop/panda.png" style="width: 65px; height: 65px;border-radius: 50%;"></image>
            <view>
              <view class="picname text-white text-xxl margin-left-sm">{{form.name}}</view>
              <view class='pictext text-xs margin-left-sm margin-top-xs'>{{form.text}}</view>
            </view>
          </view>
          <uni-icons @click="Unrecognized" style="margin-top: 20px;" type="right" size="30" color='#fff'></uni-icons>
        </view>
      </view>
    </template>
  </navbar-bg>
  <!-- 积分信息卡片开始 -->
  <view style="width: 100%; height: 350rpx; margin-top: -170rpx; position:relative;">
    <image src='https://api.anred.qrsk.net/applet/profile/image/me/me/bg.png' style="width: 100%;height: 200px;"></image>
    <view style="position: absolute; top:0; left:0;">
      <view style="margin: 40px;">
        <view class="information-box-left-iocn">
          <image src="https://api.anred.qrsk.net/applet/profile/image/me/me/zs.png" style="width: 25px;height: 25px;"></image>
          <view class="text-xl text-bold" style="margin: 0 0 0 10px;">未实名</view>
        </view>
        <view>
          <view class="text-df text-bold" style="margin-top: 45px;">红色基因代代传，你有困难我来帮</view>
          <view class="text-sm margin-top-xs">收集困难群众诉求，千方百计想办法解决</view>
        </view>
      </view>
    </view>
  </view>
  <!-- 积分信息卡片结束 -->
  <!-- 我的兑换模块开始 -->
  <view class="cart-line">
    <view class="straightline"></view>
    <view class="text-xl text-bold margin-left-xs">我的兑换</view>
  </view>
  <view class="cart-box display-flex">
    <view class="cart-box-1">
      <image src="https://api.anred.qrsk.net/applet/profile/image/me/me/jiaohu.png" style="width: 27px;height: 27px; margin: 16px 20px"></image>
      <view class="text-lg margin-top-sm">待取</view>
      <uni-icons style=" margin:20px 10px 0 20px;" size="16" type="right"></uni-icons>
    </view>
    <view class="cart-box-2">
      <image src="https://api.anred.qrsk.net/applet/profile/image/me/me/address.png" style="width: 27px;height: 27px; margin: 16px 20px"></image>
      <view class="text-lg margin-top-sm">已取</view>
      <uni-icons style=" margin:20px 10px 0 20px;" size="16" type="right"></uni-icons>
    </view>
  </view>
  <!-- 我的兑换模块结束 -->
  <!-- 我的订单模块开始 -->
  <view class="cart-line" style="margin-top: 40px;">
    <view class="straightline"></view>
    <view class="text-xl text-bold margin-left-xs">我的订单</view>
  </view>
  <view class="margin-top-xs grid-padd">
    <uni-grid :column="4" :showBorder="false" :square="false" :highlight="false" @change="serveChange">
      <uni-grid-item :index="0" class="padding-tb-xs" style="text-align: center; vertical-align: middle;">
        <image src="https://api.anred.qrsk.net/applet/profile/image/me/me/non-payment.png" class="margin-auto"
               style="width: 35px; height: 35px;"></image>
        <view class="margin-top-xs text-df">待付款</view>
      </uni-grid-item>
      <uni-grid-item :index="1" class="padding-tb-xs" style="text-align: center; vertical-align: middle;">
        <image src="https://api.anred.qrsk.net/applet/profile/image/me/me/wait.png" class="margin-auto"
               style="width: 35px; height: 35px;"></image>
        <view class="margin-top-xs text-df">待发货</view>
      </uni-grid-item>
      <uni-grid-item :index="2" class="padding-tb-xs" style="text-align: center; vertical-align: middle;">
        <image src="https://api.anred.qrsk.net/applet/profile/image/me/me/wait_goods.png" class="margin-auto"
               style="width: 35px; height: 35px;"></image>
        <view class="margin-top-xs text-df">待收货</view>
      </uni-grid-item>
      <uni-grid-item :index="3" class="padding-tb-xs" style="text-align: center; vertical-align: middle;">
        <image src="https://api.anred.qrsk.net/applet/profile/image/me/me/refund.png" class="margin-auto"
               style="width: 35px; height: 35px;"></image>
        <view class="margin-top-xs text-df">退款</view>
      </uni-grid-item>
    </uni-grid>
  </view>
  <!-- 我的订单模块结束 -->
  <!-- 其他功能模块开始 -->
  <view class="cart-line">
    <view class="straightline"></view>
    <view class="text-xl text-bold margin-left-xs">我的订单</view>
  </view>
  <view class="margin-top-xs grid-padd">
    <uni-grid :column="4" :showBorder="false" :square="false" :highlight="false" @change="serveChange">
      <uni-grid-item :index="0" class="padding-tb-xs" style="text-align: center; vertical-align: middle;">
        <image src="https://api.anred.qrsk.net/applet/profile/image/me/me/team.png" class="margin-auto"
               style="width: 35px; height: 35px;"></image>
        <view class="margin-top-xs text-df">志愿团队</view>
      </uni-grid-item>
      <uni-grid-item :index="1" class="padding-tb-xs" style="text-align: center; vertical-align: middle;" @change="getjoin">
        <image src="https://api.anred.qrsk.net/applet/profile/image/me/me/penpor.png" class="margin-auto"
               style="width: 35px; height: 35px;" @click="getjoin"></image>
        <view class="margin-top-xs text-df">志愿申请</view>
      </uni-grid-item>
      <uni-grid-item :index="2" class="padding-tb-xs" style="text-align: center; vertical-align: middle;">
        <image src="https://api.anred.qrsk.net/applet/profile/image/me/me/address.png" class="margin-auto"
               style="width: 35px; height: 35px;"></image>
        <view class="margin-top-xs text-df">收货地址</view>
      </uni-grid-item>
      <uni-grid-item :index="3" class="padding-tb-xs" style="text-align: center; vertical-align: middle;">
        <image src="https://api.anred.qrsk.net/applet/profile/image/me/me/compose.png" class="margin-auto"
               style="width: 35px; height: 35px;"></image>
        <view class="margin-top-xs text-df">问题反馈</view>
      </uni-grid-item>
    </uni-grid>
  </view>
  <!-- 其他功能模块结束 -->
  <!-- 归属地开始 -->
  <view style="font-size: 12px;color: #8E8E8E;margin:106px 0 0 104px; height: 150px; line-height: 250%;">
    <view>主办单位：****************</view>
    <view>建设指导：****************</view>
    <view>技术支持：江西企融数字科技有限公司</view>
  </view>
  <!-- 归属地结束 -->
</template>

<script  setup lang="ts">
import { ref } from 'vue';
let form = ref({
  name:'和熙涵',
  text: '这个人很懒，什么都没说',
  integral:1299,
  time:'2024-4-23',
  workhours:568,
})
const Unrecognized = () =>{
  uni.switchTab({
    url:'/pages/me/me'
  })
}
const getjoin = () =>{
  console.log('123')
  uni.navigateTo({
    url:'/pages/me/joinMe'
  })
}
</script>

<style>
.profile-picture{
  height: 250px;
  padding: 26px;
  display: flex;
  justify-content: space-between;
}
.picture-name{
  display: flex;
}
.pictext{
  margin-top: 15px;
  color: rgba(77, 69, 69, 0.55);
}
.integral-box{
  display: flex;
}
.integral{
  padding: 36px 22px 25px 42px;
}
.information-box{
  width: 100%;
  padding-left:42px;
  display: flex;
}
.information-box-right{
  margin: 5px 52px 0 0;
}
.information-box-left-iocn{
  display: flex;
}
.integral-number{
  margin-top: 30px;
}
.iconbox{
  height: 8px;
  width: 58px;
  margin-top: -6px;
  background: linear-gradient(to right,#FE4505,#F79E90,#FBEDE1);
  border-radius: 4px 0 0 4px;
}
.cart-line{
  margin: 30px 30px 0 30px;
  display: flex;
}
.straightline{
  height: 26px;
  width: 0;
  border: 1px solid #EE3F4D;
}
.cart-box{
  display: flex;
  padding: 0 15px 0 15px;
}
.cart-box-1{
  display: flex;
  width: 180px;
  height: 60px;
  border-radius: 15px;
  margin: 23px 0 0 0;
  background-color: #fff;
  box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.16);
}
.cart-box-2{
  display: flex;
  width: 180px;
  height: 60px;
  border-radius: 15px;
  margin: 23px 0 0 10px;
  background-color: #fff;
  box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.16);
}
.grid-padd{
  padding: 10px;
}
</style>
